<html>

<!-- #BeginTemplate "pdn_help.dwt" -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- #BeginEditable "title" -->
<title>Paint.NET Help - Layers and Blend Modes</title>
<!-- #EndEditable -->
<link rel="stylesheet" type="text/css" href="../stylesheet.css">
</head>

<body>

<div id="banner">
	<a href="http://www.getpaint.net/">
	<img border="0" src="../images/logo.png"></a><p>
	&nbsp;</div>
<div id="leftnav">
	<ul class="toc" style="margin-left: 0; padding-left: 0;">
		<li><a href="index.html">Overview</a><br>
		</li>
		<li><a href="Features.html">Features</a><br>
		<a href="Tutorials.html">Tutorials</a><br>
		<a href="WhatsNew.html">What&#39;s New?</a><br>
		</li>
	</ul>
	<h3>Concepts</h3>
	<ul class="toc" style="margin-left: 0; padding-left: 0;">
		<li><a href="LayersAndBlendModes.html">Layers and Blend Modes</a></li>
	</ul>
	<h3>User Interface</h3>
	<ul class="toc" style="margin-left: 0; padding-left: 0;">
		<li><a href="KeyboardMouseCommands.html">Keyboard &amp; Mouse Commands</a></li>
		<li><a href="MainWindow.html">Main Window</a></li>
		<li><a href="ImageList.html">Image List</a></li>
		<li><a href="MenuBar.html">Menu Bar</a>
		<ul class="toc">
			<li><a href="FileMenu.html">File</a></li>
			<li><a href="EditMenu.html">Edit</a></li>
			<li><a href="ViewMenu.html">View</a></li>
			<li><a href="ImageMenu.html">Image</a></li>
			<li><a href="LayersMenu.html">Layers</a>
			<ul class="toc">
				<li class="comment"><a href="RotateZoom.html">Rotate / Zoom</a></li>
			</ul></li>
			<li><a href="AdjustmentsMenu.html">Adjustments</a>&nbsp;
				<ul class="toc">
				    <li><a href="Curves.html">Curves</a></li>
					<li><a href="Levels.html">Levels</a></li>
				</ul></li>
			<li><a href="EffectsMenu.html">Effects</a></li>
			<li><a href="WindowMenu.html">Window</a></li>
			<li><a href="HelpMenu.html">Help</a></li>
		</ul>
		</li>
		<li><a href="Toolbar.html">Toolbar</a></li>
		<li><a href="ToolsWindow.html">Tools Window</a><ul class="toc">
			<li><a href="SelectionTools.html">Selection Tools</a></li>
			<li><a href="MoveTools.html">Move Tools</a><br>
			<a href="MagicWand.html">Magic Wand</a></li>
			<li><a href="GradientTool.html">Gradient Tool</a><br>
			<a href="Paintbrush.html">Paintbrush</a></li>
			<li><a href="EraserTool.html">Eraser Tool</a></li>
			<li><a href="PixelTools.html">Pixel Tools</a></li>
			<li><a href="ShapeTools.html">Shape Tools</a></li>
			<li><a href="LineCurve.html">Line / Curve Tool</a></li>
			<li><a href="TextTool.html">Text Tool</a></li>
			<li><a href="PaintBucket.html">Paint Bucket</a></li>
			<li><a href="CloneStamp.html">Clone Stamp</a></li>
			<li><a href="RecolorTool.html">Recolor Tool</a></li>
		</ul>
		</li>
		<li><a href="HistoryWindow.html">History Window</a></li>
		<li><a href="LayersWindow.html">Layers Window</a></li>
		<li><a href="ColorsWindow.html">Colors Window</a></li>
		<li><a href="StatusBar.html">Status Bar</a></li>
	</ul>
	</li>
	<h3>Other</h3>
	<ul class="toc" style="margin-left: 0; padding-left: 0;">
		<li><a href="FAQ.html">FAQ (Frequently Asked Questions)</a></li>
		<li><a href="UnattendedInstallation.html">Unattended Installation</a></li>
		<li><a href="SystemRequirements.html">System Requirements</a></li>
		<li><a href="WebLinks.html">Web Links</a></li>
		<li><a href="License.html">License</a></li>
	</ul>
</div>
<div id="content">
	<!-- #BeginEditable "content" -->
	<h2>Layers and Blend Modes</h3><p>Paint.NET allows you to use layers and 
	blending modes as the foundation for composing images.</p>
	<h3><a name="Layers"></a>Layers</h3>
	<p>For this discussion the following two images will be used for the 
	background layer and for the 1st layer that is placed on top of the 
	background layer:</p>
	<table border="0" width="50%">
		<tr>
			<td>
			<p align="center">
			<img border="1" src="../images/BlendModes_Layer1.jpg"></p>
			<p align="center">Background Layer - Picture of a Classic Camaro<br>
			(&quot;Bottom Layer&quot;)</td>
			<td>
			<p align="center">
			<img border="1" src="../images/BlendModes_Layer2.jpg"></p>
			<p align="center">Layer 1 - Picture of Seattle<br>
			(&quot;Top Layer&quot;)</td>
		</tr>
	</table>
	<p>You may think of &quot;layers&quot; as a stack of transparency slides that, when 
	viewed together, form a complete image. Paint.NET displays this stack as if 
	you were viewing it from the top and with no perspective (layers do not get 
	&quot;smaller&quot; when they are closer to the bottom of the stack, which would place 
	them &quot;farther away&quot;). To better visualize how layers work, it may help if we 
	view the layer stack from the side instead of from the top:</p>
	<p>
	<img border="0" src="../images/LayerStack3D.jpg"></p>
	<h3><a name="PixelsAndTransparency"></a>Pixels and Transparency</h3>
	<p>Every layer in Paint.NET is composed of
	<a href="http://en.wikipedia.org/wiki/Pixel">pixels</a> which are stored in 
	the <a href="http://en.wikipedia.org/wiki/RGBA_color_space">RGBA</a> format. 
	The RGB part stands for red-green-blue, and is used to store traditional 
	color intensity. The &quot;A&quot; is for alpha and is used to store information about 
	the transparency of a pixel. This alpha value may range from 0 (completely 
	transparent) to 255 (completely opaque). (Other software may refer to this 
	as ranging from 0% to 100%.) If a pixel is transparent, then pixels from the 
	layers below will show through. Paint.NET uses a technique called
	<a href="http://en.wikipedia.org/wiki/Alpha_compositing">alpha compositing</a> 
	to be able to display a layered image on a standard computer monitor.</p>
	<p>However, transparent pixels cannot be displayed on a computer monitor. In 
	order to simulate this Paint.NET uses a checkerboard pattern, which looks 
	like this:</p>
	<blockquote>
		<p><img border="1" src="../images/TransparentCheckerboard.png"></p>
	</blockquote>
	<p>If you see this then it means that part of your image is transparent -- 
	the checkerboard pattern is not actually part of the image. You may think of 
	the checkerboard pattern as a virtual background layer, or &quot;layer zero,&quot; 
	which is always below all layers that are shown in the
	<a href="LayersWindow.html">Layers window</a>. However, as previously 
	mentioned, it is not actually part of the image. If you save the image and 
	then view or load it with other software then the checkerboard pattern will 
	not be there (unless, of course, if that other software also uses a 
	checkerboard pattern to simulate transparency).</p>
	<h3><a name="LayersAndOpacity"></a>Layers and Opacity</h3>
	<p>While every pixel has transparency information associated with it, every 
	layer also has an associated opacity value. The two terms are similar and in 
	most cases can be treated as the same. You may think of a layer&#39;s opacity 
	value as a &quot;dimmer&quot; for the alpha values of every pixel in the layer.</p>
	<p>For example, if we take the top layer and adjust its opacity from 255 
	gradually down to 0, we will get the following images, shown as both 
	conceptual stacks and as it would be shown on the computer monitor:</p>
	<table border="0" width="50%">
		<tr>
			<td width="683">
			<p align="center">
			<img border="0" src="../images/LayerStack3D.jpg" width="360" height="168"><img border="1" src="../images/BlendModes_Layer2.jpg"></p>
			<p align="center">Layer 1 at 255 opacity (100%)<br>
			Completely opaque: The car is not visible.</td>
		</tr>
		<tr>
			<td width="683">
			<p align="center">
			<img border="0" src="../images/LayerStack3D_128.jpg" width="360" height="168"><img border="1" src="../images/BlendMode_Normal_128.jpg"></p>
			<p align="center">Layer 1 at 128 opacity (about 50%)<br>
			Partially transparent: The picture of Seattle is partially visible.</td>
		</tr>
		<tr>
			<td width="683">
			<p align="center">
			<img border="0" src="../images/LayerStack3D_0.jpg" width="360" height="168"><img border="1" src="../images/BlendModes_Layer1.jpg"> </p>
			<p align="center">Layer 1 at 0 opacity (0%)<br>
			Completely transparent: The picture of Seattle is not visible.</td>
		</tr>
	</table>
    <h3><a name="BlendModes"></a>Blend Modes</h3>
	<p>A layer&#39;s blend mode specifies how it is blended with the layers below 
	it. To change a layer&#39;s blend mode, click on the respective layer and then 
	open its Properties (via the Layers menu, the Properties button, or by 
	double clicking the layer). The following dialog will be shown:</p>
	<blockquote>
		<p>
		<img border="0" src="Images/LayerProperties.png"></p>
	</blockquote>
	<p>Not all blend modes are easy to understand in classic or intuitive terms, 
	and because of this we recommend that you experiment and make use of the
	<a href="http://www.getpaint.net/redirect/forum.html">forum</a> for asking 
	questions and getting tips. Each blend mode is described below along with an 
	image composed of the two layers discussed previously, but with the 
	respective blend mode selected and the opacity set to 255.</p>
	<p>In the discussions below, the term <i>composition </i>will be used. This 
	refers to the result of blending all of the layers below the current layer 
	which is being discussed. The &quot;final&quot; composition is what you see on the 
	screen while working with the image. However, for this discussion we need to 
	refer to the composition as it is being composed, layer by layer.</p>
	<ul>
		<li><h3><a name="Normal"></a>Normal</h3><p>This is the default and 
		standard blend mode. Each pixel in the layer is blended with the 
		composition depending on its alpha value.</p></li>
		<li><h3><a name="Multiply"></a>Multiply</h3><p>Each pixel component&#39;s 
		intensity is multiplied with the pixel value in the composition. The 
		result of using this blend mode is always pixels that are darker than 
		the original. White pixels have no effect and are thus effectively 
		transparent. </p>
		<p><img border="1" src="../images/BlendMode_Multiply.jpg"></p>
		</li>
		<li><h3><a name="Additive"></a>Additive</h3><p>Each pixel&#39;s color 
		intensity is added to the intensity of the pixel values in the 
		composition. This will always brighten pixels in the composition, except 
		for pixels that are completely black which will be effectively 
		transparent.</p>
		<p>
		<img border="1" src="../images/BlendMode_Additive.jpg" width="288" height="180"></p>
		</li>
		<li><h3><a name="ColorBurn"></a>Color Burn</h3><p>This blend mode has 
		the effect such that dark pixels are made darker. Lighter pixels must be 
		blended with other lighter pixels in order to remain bright.</p>
		<p><img border="1" src="../images/BlendMode_ColorBurn.jpg"></p>
		</li>
		<li><h3><a name="ColorDodge"></a>Color Dodge</h3><p>This can be thought 
		of as the opposite of Color Burn. Lighter pixels are kept light, whereas 
		darker pixels must be blended with other dark pixels in order to remain 
		dark.</p>
		<p><img border="1" src="../images/BlendMode_ColorDodge.jpg"></p>
		</li>
		<li><h3><a name="Reflect"></a>Reflect</h3><p>This blend mode can be used 
		for adding shiny objects or areas of light. </p>
		<p><img border="1" src="../images/BlendMode_Reflect.jpg"></p>
		</li>
		<li><h3><a name="Glow"></a>Glow</h3><p>This is the reverse of the 
		Reflect mode: it works the same as swapping the layer positions and 
		using Reflect.</p>
		<p><img border="1" src="../images/BlendMode_Glow.jpg"></p>
		</li>
		<li><h3><a name="Overlay"></a>Overlay</h3><p>This is a combination of 
		Screen and Multiply depending on the intensity of the layer pixel. For 
		darker colors, this acts like Multiply. For lighter colors, this acts 
		like Screen.</p>
		<p><img border="1" src="../images/BlendMode_Overlay.jpg"></p>
		</li>
		<li><h3><a name="Difference"></a>Difference</h3><p>The counterpart to 
		Additive. The layer pixel&#39;s intensity is subtracted from the composition 
		pixel&#39;s intensity resulting in darker colors. Since this can produce a 
		negative intensity, which is not possible to display, the absolute value 
		is used. Thus, both &quot;white minus black&quot; and &quot;black minus white&quot; will 
		both produce white. This is quite often useful when using the <a href="EffectsMenu.html#Clouds">
		Clouds</a> effect.</p>
		<p><img border="1" src="../images/BlendMode_Difference.jpg"></p>
		</li>
		<li><h3><a name="Negation"></a>Negation</h3><p>At first glance this 
		seems similar to Difference, but it actually produces the opposite 
		effect. Instead of making colors darker, it will make them brighter.</p>
		<p><img border="1" src="../images/BlendMode_Negation.jpg"></p>
		</li>
		<li><h3><a name="Lighten"></a>Lighten</h3><p>The lighter pixel of either 
		the layer or the composition is used.</p>
		<p><img border="1" src="../images/BlendMode_Lighten.jpg"></p>
		</li>
		<li><h3><a name="Darken"></a>Darken</h3><p>The darker pixel of either 
		the layer or the composition is used.</p>
		<p><img border="1" src="../images/BlendMode_Darken.jpg"></p>
		</li>
		<li><h3><a name="Screen"></a>Screen</h3><p>This can be thought of as the 
		opposite of the Multiply blend mode. It is used to make pixels brighter, 
		with black being effectively transparent. </p>
		<p><img border="1" src="../images/BlendMode_Screen.jpg"></p>
		</li>
		<li><h3><a name="Xor"></a>Xor</h3><p>This is short for &quot;<a href="http://en.wikipedia.org/wiki/Exclusive_or">exclusive 
		OR</a>&quot;, which is an advanced blending mode that is primarily used for 
		image analysis and not for drawing or image composition.</p>
		<p><img border="1" src="../images/BlendMode_Xor.jpg"></p>
		</li>
	</ul>
	<!-- #EndEditable -->
	<h4><br>
	<br>
	</h4>
	<p align="center">
	<font color="#808080" size="1">Copyright <font face="Times New Roman">© 2007 </font>
	Rick Brewster, Tom Jackson, and past contributors. Portions Copyright
	<font face="Times New Roman">© 2007 </font>Microsoft Corporation. All Rights 
	Reserved.</font><font size="1"> <br>
	</font>
</div>
</b>

</body>

<!-- #EndTemplate -->

</html>
